<!doctype html>
<html lang="zh-Hans">
	<head>
		<meta charset="utf-8">
		<meta name="application-name" content="科研训练管理系统">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">

		<title>科研训练管理系统</title>
		<link rel="stylesheet" href="./angular/angular-material.min.css">
		<link rel="stylesheet" href="./index.css">
		<script src="./require.js" data-main="rsms" async></script>

		<link rel="icon" type="image/png" href="./favicon/16x16.png" sizes="16x16">
		<link rel="icon" type="image/png" href="./favicon/32x32.png" sizes="32x32">
		<link rel="icon" type="image/png" href="./favicon/96x96.png" sizes="96x96">
		<link rel="icon" type="image/png" href="./favicon/194x194.png" sizes="194x194">
		<style>[ng-cloak] { display: none; }</style>
	</head>

	<script type="text/ng-template" id="prompt-dialog">
		<md-dialog>
			<form name="dialog_form" novalidate>
				<md-dialog-content>
					<md-content layout="column" layout-margin flex>
						<div ng-if="dialog.text">
							<p class="spaced">{{dialog.text}}</p>
							<md-divider></md-divider>
						</div>
						<div>
							<md-input-container ng-if="dialog.label != null" class="md-icon-float md-block">
								<label>{{dialog.label}}</label>
								<md-icon md-svg-icon="{{dialog.icon}}"></md-icon>
								<input type="{{dialog.type}}" name="input" ng-model="dialog.value" required md-autofocus>
								<div ng-messages="dialog_form.input.$error">
									<div ng-message="required">必填</div>
								</div>
							</md-input-container>
							<md-input-container ng-if="dialog.selections != null" class="md-icon-float md-block">
								<md-icon md-svg-icon="{{dialog.icon}}"></md-icon>
								<md-select ng-model="dialog.value" name="input" md-autofocus>
									<md-option ng-repeat="item in dialog.selections" value="{{item}}">
										{{item}}
									</md-option>
								</md-select>
							</md-input-container>
						</div>
					</md-content>
				</md-dialog-content>
				<md-dialog-actions>
					<md-button ng-click="dialog.close()">取消</md-button>
					<md-button type="submit" class="{{dialog.action_style}}" ng-click="dialog_form.$valid && dialog.action(dialog_form.input)">{{dialog.action_text}}</md-button>
				</md-dialog-content>
			</form>
		</md-dialog>
	</script>

	<script type="text/ng-template" id="form-dialog">
		<md-dialog>
			<form name="dialog_form" novalidate>
				<md-dialog-content>
					<md-content layout="column" layout-margin flex>
						<div ng-repeat="input in dialog.inputs" class="compact-input">
							<md-input-container ng-if="!input.selections && !input.rows" class="md-icon-float md-block">
								<label>{{input.label}}</label>
								<md-icon md-svg-icon="{{input.icon}}"></md-icon>
								<input type="{{input.type}}" name="{{input.id}}" ng-model="dialog.values[input.id]" min="{{input.min}}" max="{{input.max}}" step="{{input.step}}" required>
								<div ng-messages="dialog_form.{{input.id}}.$error">
									<div ng-message="required">
										{{dialog_form[input.id].$error.required ? '必填' : ''}}
										{{dialog_form[input.id].$error.min ? '数值太小' : ''}}
										{{dialog_form[input.id].$error.max ? '数值太大' : ''}}
										{{dialog_form[input.id].$error.number ? '必须是数字' : ''}}
									</div>
								</div>
							</md-input-container>
							<md-input-container ng-if="input.rows" class="md-icon-float md-block">
								<label>{{input.label}}</label>
								<md-icon md-svg-icon="{{input.icon}}"></md-icon>
								<textarea name="{{input.id}}" ng-model="dialog.values[input.id]" rows="{{input.rows}}" required></textarea>
								<div ng-messages="dialog_form.{{input.id}}.$error">
									<div ng-message="required">
										{{dialog_form[input.id].$error.required ? '必填' : ''}}
									</div>
								</div>
							</md-input-container>
							<md-input-container ng-if="input.selections" class="md-icon-float md-block">
								<label>{{input.label}}</label>
								<md-icon md-svg-icon="{{input.icon}}"></md-icon>
								<md-select ng-model="dialog.values[input.id]" name="{{input.id}}" required>
									<md-option ng-repeat="item in input.selections" value="{{item}}">
										{{item}}
									</md-option>
								</md-select>
								<div ng-messages="dialog_form.{{input.id}}.$error">
									<div ng-message="required">必填</div>
								</div>
							</md-input-container>
						</div>
					</md-content>
				</md-dialog-content>
				<md-dialog-actions>
					<md-button ng-click="dialog.close()">取消</md-button>
					<md-button type="submit" class="md-primary" ng-click="dialog_form.$valid && dialog.action()">{{dialog.action_text}}</md-button>
				</md-dialog-content>
			</form>
		</md-dialog>
	</script>

	<body layout="column" ng-controller="app-controller as app">

		<!-- progress spinner overlay -->
		<div class="rsms-progress-ocd-death text" id="preloading">
			<div class="rsms-progress-ocd-death-rotation">
				<div class="rsms-progress-ocd-death-spinner"></div>
			</div>
		</div>

		<!-- main area -->
		<section layout="row" flex ng-cloak>

			<!-- progress spinner overlay -->
			<div class="rsms-progress-ocd-death"
				 ng-class="{ text: app.busy !== '' }"
				 ng-if="app.busy != null">
				<div class="rsms-progress-ocd-death-rotation">
					<div class="rsms-progress-ocd-death-spinner"></div>
				</div>
				<p>{{app.busy}}</p>
			</div>

			<!-- side pane -->
			<md-sidenav class="md-sidenav-left md-whiteframe-z2"
						md-component-id="left"
						layout="column"
						md-is-locked-open="app.menu_lock_open()"
						flex-gt-sm="25">
				<!-- profile info -->
				<md-toolbar class="md-tall">
					<div layout="column" layout-align="center center" flex>
						<div layout="row" layout-wrap layout-padding layout-align="center end">
							<span class="md-subhead">{{app.role}}</span>
							<span class="md-headline">{{app.name}}</span>
						</div>
					</div>
				</md-toolbar>

				<!-- page switcher -->
				<md-content>
					<md-list>
						<md-list-item ng-repeat="page in app.pages"
									  ng-if="app.accessible(page)"
									  ng-click="app.page_select(page)"
									  ng-class="{ selected: app.page_is(page) }">
							<md-icon md-svg-icon="{{page.icon}}"></md-icon>
							<p>{{page.name}}</p>
						</md-list-item>
					</md-list>
				</md-content>
			</md-sidenav>

			<!-- main area -->
			<md-content layout="column" flex>
				<md-toolbar>
					<div class="md-toolbar-tools">
						<md-button class="md-icon-button"
								   ng-click="app.open_menu()"
								   ng-hide="app.menu_lock_open()">
							<md-icon md-svg-icon="menu"></md-icon>
						</md-button>
						<h2>{{app.page.name}}</h2>
						<span flex></span>

						<!-- list back icon -->
						<md-button ng-click="app.page_back()"
								   ng-show="app.view_is('list') && app.page.back != null"
								   ng-disabled="app.loading"
								   ng-class="{ 'md-icon-button': !app.toolbar_show_icons() }">
							<md-icon md-svg-icon="back"></md-icon>
							<span ng-show="app.toolbar_show_icons()">返回</span>
						</md-button>

						<!-- list add icon -->
						<md-button ng-click="app.list_add($event, app.page)"
								   ng-show="app.view_is('list') && app.page.add != null"
								   ng-disabled="app.loading"
								   ng-class="{ 'md-icon-button': !app.toolbar_show_icons() }">
							<md-icon md-svg-icon="plus"></md-icon>
							<span ng-show="app.toolbar_show_icons()">添加{{app.page.name}}</span>
						</md-button>

						<!-- list ack icon -->
						<md-button ng-click="app.list_ack($event, app.page)"
								   ng-show="app.view_is('list') && app.page.ack"
								   ng-disabled="app.loading"
								   ng-class="{ 'md-icon-button': !app.toolbar_show_icons() }">
							<md-icon md-svg-icon="check"></md-icon>
							<span ng-show="app.toolbar_show_icons()">确认</span>
						</md-button>

						<!-- list refresh icon -->
						<md-button ng-click="app.list_refresh()"
								   ng-show="app.view_is('list')"
								   ng-disabled="app.loading"
								   ng-class="{ 'md-icon-button': !app.toolbar_show_icons() }">
							<md-icon md-svg-icon="refresh"></md-icon>
							<span ng-show="app.toolbar_show_icons()">刷新</span>
						</md-button>

						<!-- toolbar icons -->
						<span ng-show="app.toolbar_show_icons()">
							<md-button ng-repeat="icon in app.toolbar_icons"
									   class="{{icon.style}}"
									   ng-click="app.toolbar_icon_click(icon, $event)"
									   ng-if="!icon.divider"
									   ng-disabled="app.page_is(icon)">
								<md-icon md-svg-icon="{{icon.icon}}"></md-icon>
								{{icon.name}}
							</md-button>
						</span>

						<!-- collapsed toolbar icons -->
						<md-menu md-position-mode="target-right target" ng-hide="app.toolbar_show_icons()">
							<md-button class="md-icon-button" ng-click="$mdOpenMenu($event)">
								<md-icon md-svg-icon="more-vert"></md-icon>
							</md-button>
							<md-menu-content width="3">
								<div ng-repeat="icon in app.toolbar_icons">
									<md-menu-item ng-if="!icon.divider">
										<md-button class="{{icon.style_collapse}}"
												   ng-disabled="app.page_is(icon)"
												   ng-click="app.toolbar_icon_click(icon, $event)">
											<md-icon md-svg-icon="{{icon.icon}}"></md-icon>
											{{icon.name}}
										</md-button>
									</md-menu-item>
									<md-divider ng-if="icon.divider"></md-divider>
								</div>
							</md-menu-content>
						</md-menu>
					</div>
				</md-toolbar>

				<!-- home view -->
				<md-content layout="column" layout-align="center center" layout-padding flex
							ng-show="app.view_is('home')">
					<img src="./favicon/194x194.png" alt="rsms-logo">
					<div>科研训练管理系统 <code>v0.1.8</code></div>
					<div class="unimportant">API 地址： <code>{{app.api_base}}</code></div>
					<div class="unimportant">登录用户： <code>{{app.username}}</code></div>
				</md-content>

				<!-- list view -->
				<md-content layout="column" layout-align="center center" layout-padding flex
							ng-show="app.view_is('list')">
					<md-virtual-repeat-container flex layout-fill>
						<md-list>
							<md-menu md-position-mode="target-right target"
									 md-virtual-repeat="item in app.list_items()" md-on-demand
									 md-item-size="51"
									 style="height: 50px">

									<md-list-item style="min-height: 50px"
												  ng-click="$mdOpenMenu($event)"
												  ng-disabled="item == null">
											<div ng-if="item != null" flex layout="row" class="baseline-align {{app.page.list_text.style(item)}}">
											<span class="md-title no-wrap">{{app.page.list_text.major(item)}}</span>
											<span class="unimportant spaced thin-height">{{app.page.list_text.desc(item)}}</span>
											<span flex></span>
											<span class="md-subhead spaced thin-height">{{app.page.list_text.minor(item)}}</span>
										</div>
										<div ng-if="item == null" layout="row" layout-align="center center" flex>
											<md-progress-circular md-mode="indeterminate"></md-progress-circular>
										</div>
										<!-- FIXME -->
										<md-checkbox ng-if="app.page.checkbox" class="md-secondary" ng-checked="app.exists(item.id)"
												ng-click="app.toggle(item.id)"></md-checkbox>
									</md-list-item>

								<md-menu-content width="4">
									<md-menu-item ng-if="item != null && app.page.list_text.menu(item) != null" class="reset-height">
										<p class="spaced">{{app.page.list_text.menu(item)}}</p>
									</md-menu-item>
									<md-menu-divider></md-menu-divider>
									<md-menu-item ng-repeat="menu in app.page.menu">
										<md-button ng-click="menu.click(item, menu, $event)" class="{{menu.style}}" ng-disabled="{{menu.disabled}}">
											<md-icon md-svg-icon="{{menu.icon}}"></md-icon>
											{{menu.name}}
										</md-button>
									</md-menu-item>
								</md-menu-content>
							</md-menu>
						</md-list>
					</md-virtual-repeat-container>
				</md-content>

			</md-content>
		</section>
	</body>
</html>

